<template>
	<view class="container">
		<view>
			<view class="item">
				<view class="item_title">
					<text class="required">*</text>
					企业名称
				</view>
				<u--input placeholder="请输入企业名称" border="surround" v-model="name"></u--input>
			</view>

			<view class="item">
				<view class="item_title">
					<text class="required">*</text>
					联系人
				</view>
				<u--input placeholder="请输入联系人" border="surround" v-model="true_name"></u--input>
			</view>

			<view class="item">
				<view class="item_title">
					<text class="required">*</text>
					联系电话
				</view>
				<u--input placeholder="请输入联系电话" border="surround" v-model="tel" type="number"></u--input>
			</view>

			<view class="item">
				<view class="item_title">
					<text class="required">*</text>
					服务类目
				</view>
				<picker mode="selector" @cancel="cancels1" @change="onChange1" :range="serverCategory" range-key="name"
					class="picker1">
					<view class="picker" :class="service_cate_id == '' ? 'placeholder' : 'noPlaceholder'">
						{{ serverCategoryName }}
						<u-icon class="arrow_right" name="arrow-right" color="#c0c4cc"></u-icon>
					</view>
				</picker>
			</view>

			<!-- <view class="item">
				<view class="item_title">
					<text class="required">*</text>
					所在地区
				</view>
				<chose-region @change1="regionName">
					<view class="picker" :class="city_code == '' ? 'placeholder' : 'noPlaceholder'">
						{{ city }}
						<u-icon class="arrow_right" name="arrow-right" color="#c0c4cc"></u-icon>
					</view>
				</chose-region>
			</view> -->


			<view class="item">
        <view class="item_title">
          <text class="required">*</text>
          所在地区
        </view>
        <view @click="showCityListFn">
          <chose-region @change1="regionName" :disabled="true">
            <view
              class="picker"
              :class="city_code == '' ? 'placeholder' : 'noPlaceholder'"
            >
              {{ city }}
              <u-icon
                class="arrow_right"
                name="arrow-right"
                color="#c0c4cc"
              ></u-icon>
            </view>
          </chose-region>
        </view>
      </view>

			<view class="item">
				<view class="item_title">
					<text class="required">*</text>
					服务商类型
				</view>
				<picker mode="selector" @cancel="cancels" @change="onChange" :range="serverType" range-key="name" class="picker">
					<view class="picker1" :class="type == '' ? 'placeholder' : 'noPlaceholder'">
						{{ typeName }}
						<u-icon class="arrow_right" name="arrow-right" color="#c0c4cc"></u-icon>
					</view>
				</picker>
			</view>

			<view class="item">
				<view class="item_title">
					<text class="required">*</text>
					营业执照
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item, index) in imgList1" :key="index" @tap="viewImage1"
							:data-url="imgList1[index]">
							<image :src="imgList1[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg1" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="chooseImgType(1)" v-if="imgList1.length < 1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="item_title">
					<text class="required">*</text>
					企业LOGO或门头照
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item, index) in imgList2" :key="index" @tap="viewImage2"
							:data-url="imgList2[index]">
							<image :src="imgList2[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="chooseImgType(2)" v-if="imgList2.length < 1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>


			<view class="item">
				<view class="item_title">
					资质许可证书
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item, index) in imgList3" :key="index" @tap="viewImage3"
							:data-url="imgList3[index]">
							<image :src="imgList3[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg3" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="chooseImgType(3)" v-if="imgList3.length < 1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 180rpx;"></view>
		</view>
		<view class="footer">
			<view class="money">
				保证金：<text class="num">{{ costNum ? costNum : 0 }}</text>元
			</view>
			<view class="btn" @tap="submit">提交</view>
		</view>

		<!-- 授权上传图片的弹窗 -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>

		<!-- 选择拍摄还是从相册中 -->
		<view v-if="showChooseImg">
			<u-action-sheet :actions="showChooseImgList" :show="showChooseImg" cancelText="取消" @close="showChooseImg = false"
				:closeOnClickAction="true" @select="selectClick"></u-action-sheet>
		</view>


		<!-- 所在地 -->
    <u-popup :show="showCityList" @close="closeCityList">
      <view class="city_list" style="height: 80vh; padding: 30rpx 0">
        <wfAddress @getCityInfo="getCityInfo"></wfAddress>
      </view>
    </u-popup>
	</view>
</template>
<script  type="text/javascript" src="plus-confusion://../enterpriseServer/becomeServer/index"></script>

<style lang="scss" scoped>
@import url(@/static/css/font.css);
@import url(@/static/css/iconfont.css);
@import url(@/static/css/public.css);

page {
	height: 100%;
}

.container {
	width: 100vw;
	overflow: hidden;
	background: #fff;
	padding: 30rpx 30rpx 0 30rpx;
	position: relative;

	.item {
		margin-bottom: 28rpx;

		.item_title {
			font-size: 32rpx;
			font-weight: 600;
			line-height: 45rpx;
			margin-bottom: 20rpx;

			.required {
				color: #FF6161;
			}
		}

		.picker {
			height: 85rpx;
			border: 1rpx solid rgb(214, 214, 223);
			border-radius: 10rpx;
			text-align: start;
			line-height: 85rpx;
			padding: 0 20rpx;
			position: relative;
			font-size: 32rpx;

			&/deep/.arrow_right {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}


		.placeholder {
			color: #c0c4cc;
		}

		.noPlaceholder {
			color: #333;
		}
	}


	.footer {
		width: 100vw;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx;
		border-top: 1rpx solid #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.money {
			font-size: 26rpx;
			color: #666666;

			.num {
				color: #FF6161;
			}
		}

		.btn {
			width: 317rpx;
			height: 87rpx;
			background: #0177FD;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 87rpx;
		}
	}
}

.up-load {
	display: flex;
	flex-wrap: wrap;
	margin-top: 25rpx;
	padding: 0 30rpx;

	.del {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		position: absolute;
		top: -16rpx;
		right: -16rpx;
	}

	.img-wrap {
		position: relative;
		width: 116rpx;
		height: 116rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;

		&.img-jia {
			margin: 20rpx auto 0;
			width: 116rpx;
			height: 116rpx;
			background: #ffffff;
			border-radius: 10rpx;
			border: 1px dashed #b0b0b0;
			overflow: hidden;

			.iconjia {
				font-size: 40rpx;
				color: #555;
			}

			.img-jia-txt {
				margin-top: 50rpx;
				font-size: 40rpx;
			}

			&.on {
				margin: 20rpx 20rpx 0 0;
				width: 116rpx;
				height: 116rpx;

				.img-jia-txt {
					display: none;
				}

				.iconjia {
					font-size: 40rpx;
					color: #555;
				}

				.iconjia-text {
					color: #666;
					font-size: 22rpx;
					margin-top: 6rpx;
				}
			}
		}
	}

	.up-img {
		width: 116rpx;
		height: 116rpx;
		border-radius: 10rpx;
	}
}


/deep/.u-input {
	height: 85rpx;
}
</style>
